<template>
  <div class="">
    <!-- PC -->
    <footer class="footer" v-if="!pcshow" style="height:199px">
      <div class="footer_con" style="display:flex;flex-direction:row">
        <img src="../assets/xqsimage/logo1.png" />
        <div class="footer_font"></div>
        <img
          src="../assets/xqsimage/wxcode.png"
          style="height:92px;width:92px;margin-left:77px"
        />

        <div class="footer_font1">
          <div>仏山市南海区西樵鎮環山大道西樵山南門入口</div>
          <div>仏山市南海区西樵山森林公園観光開発総公司版権所有</div>
          <a><div onclick="window.location.href='https://beian.miit.gov.cn/#/Integrated/index'">ICP备案：粤ICP备17004298号</div></a>
          <div>Copyright © 2018 Xiqiao mountain All Rights Reserved.</div>
        </div>

        <div style="display:flex;flex-direction:column;margin-left:71px">
          <div style="display:flex;flex-direction:row">
            <img src="../assets/xqsimage/logo01.png" style="width:35px;height:35px"/>
            <img src="../assets/xqsimage/logo02.png" style="width:35px;height:35px" />
            <img src="../assets/xqsimage/logo03.png" style="width:35px;height:35px"/>
            <img src="../assets/xqsimage/logo04.png" style="width:35px;height:35px"/>
          </div>
          <div
            class="footer_font3"
            style="display:flex;flex-direction:row"
          >
            <div style="display:flex;flex-direction:column">
              <div>お問い</div>
              <div>合わせ</div>
            </div>

            <div class="footer_font2" style="margin-left:10px;margin-top: 8px;">
              <div>400-111-9288</div>
            </div>
            <img
              src="../assets/xqsimage/bottomlogo.png"
              style="width:40px;height:40px;margin-left:25px;margin-top:-8px;cursor:pointer"
              @click="backTop()"
            />
          </div>
        </div>
      </div>
    </footer>
    <!-- 手机 -->
    <footer class="footer" v-if="pcshow" style="height:130px">
      <div class="copy" style="margin-top:10px">
        仏山市南海区西樵鎮環山大道西樵山南門入口
      </div>
      <div class="copy">仏山市南海区西樵山森林公園観光開発総公司版権所有</div>
      <div class="copy">400-111-9288</div>
      <a><div onclick="window.location.href='https://beian.miit.gov.cn/#/Integrated/index'" class="copy">ICP备案：粤ICP备17004298号</div></a>
      <div class="copy">
        Copyright © 2018 Xiqiao mountain All Rights Reserved.
      </div>
    </footer>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  created () {
    if (this._isMobile()) {
      this.pcshow = true
    } else {
      this.pcshow = false
    }
  },
  mounted () {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    // 判断是PC端还是手机端
    _isMobile () {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
      return flag
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop () {
      let that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed
        if (document.documentElement.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },

    // 为了计算距离顶部的高度，当高度大于200显示回顶部图标，小于200则隐藏
    scrollToTop () {
      let that = this
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 200) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    }
  }
}
</script>

<style>
.footer_font {
  height: 13px;
  font-size: 12px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: #5d5d5d;
  margin-left: 16px;
}
.footer_font1 {
  font-size: 14px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: #5d5d5d;
  margin-left: 36px;
  text-align: left;

line-height: 25px;
}
.footer_font2 {
  font-size: 18px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #5d5d5d;
  margin-top:-5px
}
.footer_font3 {
  font-size: 14px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: #5d5d5d;
  text-align: left;
  margin-top:7px
}
</style>
